<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人登录</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="../static/script/base.js"></script>
</head>

<body>
    <div class="width">
        <!-- 头部区域开始 -->
        <header>
            <a href="/index" class="logo"></a>
        </header>
        <!-- 头部区域结束 -->
        <!-- 注册区域开始 -->
        <div class="loginarea">
            <div class="login">
                <h3>登录</h3>
                <h4>没有账号，<a href="/registerForm">免费注册</a></h4>
            </div>
            <div class="login_form">
                <form id="id_login_form" action="user/loginVerify">
                    <ul>
                        <li>
                            <label for="">用户名</label>
                            <input type="text" name="name" id="id_username" class="inp">
                            <span class="error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span>
                        </li>
                        <li>
                            <label for="">密码</label>
                            <input type="password" name="password" id="id_pwd" class="inp">
                            <span class="error"><i class="error_icon"></i>请输入密码</span>
                        </li>
                        <li class="login_fail">
                            <div style="margin:auto;color:red;width: 242px">用户名或密码错误</div>
                        </li>
                        <li>
                            <input type="button" id="btn_login" value="登录" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- 注册区域结束 -->
        <!-- 尾部区域开始 -->
        <footer>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a>|
                    <a href="#">联系我们</a>|
                    <a href="#">联系客服</a>|
                    <a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|
                    <a href="#">友情链接</a>|
                    <a href="#">销售联盟</a>|
                    <a href="#">食品网社区</a>|
                    <a href="#">English Site</a>|
                    <a href="#">Contact U</a>|
                </div>
                <div class="copyright">
                    地址：内蒙古师范大学盛乐校区 邮编：010000 电话：400-123-1234 传真：010-12345678 邮箱: 1234567@567.com</br>
                    蒙ICP备08001234号蒙公网安备110123456789
                </div>
            </div>
        </footer>
        <!-- 尾部区域结束 -->
    </div>
    <script>
        var error = $(".error")
        var hideError=function(){
            for(var i=0;i<error.length;++i){
                error.eq(i).css("display","none")
            }
        }
        $("#btn_login").click(function(){
            var targetUrl = $("#id_login_form").attr('action')
            var formObject = {};
            var formArray =$("#id_login_form").serializeArray();
            var nullFlag = false
            $.each(formArray,function(i,item){
                if (isNull(item.value)){
                    error.eq(i).css('display','inline-block')
                    nullFlag = true
                }
                formObject[item.name] = item.value;
            });
            var info = {'user':formObject}
            if(!nullFlag){
                $.ajax(
                    {
                        type:'POST',
                        url:targetUrl,
                        data:JSON.stringify(info),
                        contentType:"application/json",
                        success:function (result) {
                            if (result.code==2000){
                                $(location).attr('href','index');
                            }
                            if(result.code==4001){
                                $('.login_fail').css("display","block")
                            }
                            hideError()
                        }
                    }
                )
            }
        });
    </script>

</body>

</html>